<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="./vue/vue.js">
    </script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        {{message}}

        <h2>
            {{obj.type}}
        </h2>

        <h3>
            {{array[0]}}
        </h3>

        <h4 v-text="msg4h4 + ' ok' + info"></h4>
        <h4>{{msg4h4 + " ok"}}</h4>
        <div v-text="htmlTest"></div>
        <div v-html="htmlTest" v-on:click="functionName"></div>
        <input name="btn" type="button" v-on:click="functionName" />
        <input name="btn" type="button" @click="functionName" />
        <input name="btn" type="button" @dblclick="functionName" />

        <button @click="changeMyText">{{buttonInnerText}}121212</button>

        <h1 @click="changeMyText">{{buttonInnerText}}asasa</h1>


        <hr />

        <button @click="min">-</button>
        <span>{{count}}</span>
        <span style="color: red;" v-text="count"></span>
        <button @click="pls">+</button>

    </div>


    <script>
 var app = new Vue({
            el: "#app",
            data: {
                message: "xiaosi",
                info: "ooooooo",
                obj: {
                    name: "I am an obj",
                    type: "Obj"
                },
                array: [1, 2, 3],

                msg4h4: "i am a msg 4 H4 in app",
                htmlTest: "<span style='color:red;'>I should be red.</span>",

                buttonInnerText: "",

                count: 0,
            },
            methods: {
                functionName: function () {
                    alert("hhhhhhh");
                },
                changeMyText: function () {
                    this.buttonInnerText += 'ok';
                },

                min: function () {
                    var temp;
                    temp = this.count - 1;
                    if (temp < 0) {
                        alert("limited.");
                    } else {
                        this.count = temp;
                    }
                },
                pls: function () {
                    var temp;
                    temp = this.count + 1;
                    if (temp > 10) {
                        alert("maxlium.");
                    } else {
                        this.count = temp;
                    }
                },
            },
        })
    </script>
</body>

</html>